<template>
	<view class="find" :style="{'padding-top':realHeight + 36 + 'px'}">
		<view class="top-nav" :style="{'height':realHeight + 'px','padding-top':statusBarH +'px'}">
			<view class="top_center">
				<view class="search-icon">
					<u-icon name="search" color="#999" size="32"></u-icon>
				</view>
				<view class="inputBox">
					<input type="text" placeholder="早茶" v-model="keyword" @confirm="searchBtn" />
				</view>
			</view>
		</view>
		<!-- <view class="top-nav" :style="{'height':40 + statusBarH + 'px','padding-top':statusBarH +'px'}">
			<view class="top_center">
				<view class="search-icon">
					<u-icon name="search" color="#999" size="32"></u-icon>
				</view>
				<view class="inputBox">
					<input type="text" placeholder="早茶" v-model="keyword" @confirm="searchBtn" />
				</view>
			</view>
			<view class="NewsBox" @click="toNews">
				<u-icon name="bell" size="50" color="#666"></u-icon>
				<u-badge :is-dot="true" type="error"></u-badge>
			</view>
		</view> -->
		<view class="findBox">
			<!-- #ifdef MP-WEIXIN -->
			<view class="nav-top" :style="{'top':realHeight + 'px','height':36 + 'px'}">
				<view class="nav-item" v-for="(item,index) in cateList" :key="index" @click="TabbarChange(index)">
					<view :class="[currentIndex==index?'currentItem':'item-title']">{{item.name}}</view>
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifdef APP -->
			<view class="nav-top" :style="{'top':statusBarH + 40 + 'px','height':36 + 'px'}">
				<view class="nav-item" v-for="(item,index) in cateList" :key="index" @click="TabbarChange(index)">
					<view :class="[currentIndex==index?'currentItem':'item-title']">{{item.name}}</view>
				</view>
			</view>
			<!-- #endif -->
			<view class="foodBox" v-if="list.length>0">
				 <u-waterfall v-model="list" ref="uWaterfall">
					<template v-slot:left="{leftList}">
						<view class="foodItem" @click="toFindDetail" v-for="(item, index) in leftList" :key="index"
							:data-id="item.id" :data-type="item.imgType">
							<view class="foodImage" v-if="!item.imgType&&item.titleImage">
								<image :src="item.titleImage" mode="widthFix" style="width: 100%;"></image>
								<view class="playIcon">
									<u-icon name="play-circle-fill" size="48"></u-icon>
								</view>
							</view>
							<view class="foodImage" v-if="item.imgType&&item.titleImage">
								<image :src="item.titleImage" mode="widthFix" style="width: 100%;"></image>
							</view>
							<view class="foodName">{{item.title}}</view>
							<view class="food_B">
								<view class="userInfo">
									<view class="userImage">
										<image :src="item.userImg" mode=""></image>
									</view>
									<view class="userName">{{item.user.username}}</view>
								</view>
								<view class="giveBox">
									<view v-if="!item.UserShareCollection">
										<u-icon name="heart-fill" color="#999"></u-icon>
									</view>
									<view v-else>
										<u-icon name="heart-fill" color="#FF5555"></u-icon>
									</view>
									<view class="giveNum">{{item.collect_num}}</view>
								</view>
							</view>
						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view class="foodItem" @click="toFindDetail" v-for="(item, index) in rightList" :key="index"
							:data-id="item.id" :data-type="item.imgType">
							<view class="foodImage" v-if="!item.imgType&&item.titleImage">
								<image :src="item.titleImage" mode="widthFix" style="width: 100%;"></image>
								<view class="playIcon">
									<u-icon name="play-circle-fill" size="48"></u-icon>
								</view>
							</view>
							<view class="foodImage" v-if="item.imgType&&item.titleImage">
								<image :src="item.titleImage" mode="widthFix" style="width: 100%;"></image>
							</view>
							<view class="foodName">{{item.title}}</view>
							<view class="food_B">
								<view class="userInfo">
									<view class="userImage">
										<image :src="item.userImg" mode=""></image>
									</view>
									<view class="userName">{{item.user.username}}</view>
								</view>
								<view class="giveBox">
									<view v-if="!item.UserShareCollection">
										<u-icon name="heart-fill" color="#999"></u-icon>
									</view>
									<view v-else>
										<u-icon name="heart-fill" color="#FF5555"></u-icon>
									</view>
									<view class="giveNum">{{item.collect_num}}</view>
								</view>
							</view>
						</view>
					</template>
				</u-waterfall>
			</view>
			<view v-else style="padding-top: 200upx;">
				<u-empty text="暂无数据" mode="list"></u-empty>
			</view>
		</view>
		<view class="addBox" @click="toRelease">
			<u-icon name="plus" color="#fff" size="60"></u-icon>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				keyword: "",
				background: {
					backgroundColor: '#F9ECEB',
				},
				tabbarList: [{
					name: '推荐'
				}, {
					name: '附近'
				}],
				currentIndex: 0,
				statusBarHeight: 0,
				capsuleHeight: 0,
				capsuleWidth: 0,
				navigationHeight: 0,
				realHeight: 0,
				statusBarH: 0,
				leftDistance: 0,
				page: 1,
				list: [],
				flowList: [],
				cateList: [{
					name: '推荐'
				}, {
					name: '附近'
				}],
				moreFlag:false,
				topFlag:true
			}
		},
		onPullDownRefresh() {
			if(!this.topFlag){
				return false;
			}
			this.topFlag = false;
			this.page = 1;
			this.getList();
		},
		onReachBottom() {
			if(!this.moreFlag){
				return false;
			}
			this.moreFlag = false;
			this.page = this.page + 1;
			this.getList();
		},
		onShow() {
      // #ifdef APP-PLUS
      var args = plus.runtime.arguments;
      if(args){
        app.$vm.setShareDetail(args);
      }
      // #endif
		},
		onLoad() {
			this.page = 1;
			//微信小程序胶囊按钮信息
			// #ifdef MP-WEIXIN
			let res = uni.getMenuButtonBoundingClientRect();
			//获取状态栏+导航栏的高度
			// #endif
			let _that = this;
			uni.getSystemInfo({
				success(e) {
					console.log(e);
					// #ifdef MP-WEIXIN
					// 根据胶囊的位置计算导航栏的高度
					_that.realHeight = (res.top - e.statusBarHeight) * 2 + res.height + e.statusBarHeight;
					//状态栏高度
					_that.statusBarH = e.statusBarHeight;
					_that.leftDistance = e.windowWidth - res.width;
					// #endif
					// #ifdef APP
					_that.statusBarH = e.statusBarHeight;
					_that.realHeight = 40 + e.statusBarHeight;
					// #endif
					// console.log(_that.realHeight,_that.statusBarH);
				}
			})
			this.list = [];
			this.$forceUpdate();
			console.log(this.list)
			// this.getCate();
			this.getList();
			// #ifdef APP-PLUS
			// const subNVue = uni.getSubNVueById('findId');
			// subNVue.show()
			// #endif
		},
		onUnload() {
			// #ifdef APP-PLUS
			// const subNVue = uni.getSubNVueById('findId');
			// subNVue.hide()
			// #endif
		},
		methods: {
			// getCate() {
			// 	this.$u.api.industryList().then(res => {
			// 		console.log(res)
			// 		this.cateList = res.data.list;
			// 		this.cateList.unshift({
			// 			name: "推荐"
			// 		});
			// 	})
			// },
			getVideoUrl(url) {
				return app.$vm.globalData.imgBaseUrl + url + app.$vm.globalData.videoThumb;
			},
			getImage(url) {
				if (url && (url.indexOf("http://") != -1 || url.indexOf("https://") != -1)) {
					return url;
				} else {
					return app.$vm.globalData.imgBaseUrl + url;
				}
			},
			getList() {
				let obj = {};
				obj.page = this.page;
				obj.data = {};
				if (this.currentIndex != 0) {
					obj.data.juli = 1;
					obj.data.dimension = app.$vm.globalData.latitude;
					obj.data.longitude = app.$vm.globalData.longitude;
				}
				if(this.keyword.trim()){
					obj.data.titleScreen = this.keyword;
				}
				if (uni.getStorageSync("rmToken")) {
					this.$u.api.shareList(obj).then(res => {
						console.log(res)
						if (this.page == 1) {
							this.list = [];
							// this.$forceUpdate();
							setTimeout(()=>{
								uni.stopPullDownRefresh();
								this.topFlag = true;
								for (let i = 0; i < res.data.list.data.length; i++) {
									let cur = res.data.list.data[i];
									if(cur.ShareImage.length>0){
										if (app.$vm.isImage(cur.ShareImage[0].image_url)) {
											cur.titleImage = this.getImage(cur.ShareImage[0].image_url);
											cur.imgType = true;
										} else {
											cur.titleImage = this.getVideoUrl(cur.ShareImage[0].image_url);
											cur.imgType = false;
										}
									}else{
										cur.imgType = true;
									}
									cur.userImg = this.getImage(cur.user.image_url);
									if(i<this.list.length){
										this.list.splice(i,1,cur)
									}else{
										this.list.push(cur)
									}
									
								}
								this.$forceUpdate();
							},500)
							
						} else {
							for (let i = 0; i < res.data.list.data.length; i++) {
								let cur = res.data.list.data[i];
								if(cur.ShareImage.length>0){
									if (app.$vm.isImage(cur.ShareImage[0].image_url)) {
										cur.titleImage = this.getImage(cur.ShareImage[0].image_url);
										cur.imgType = true;
									} else {
										cur.titleImage = this.getVideoUrl(cur.ShareImage[0].image_url);
										cur.imgType = false;
									}
								}else{
									cur.imgType = true;
								}
								cur.userImg = this.getImage(cur.user.image_url);
								this.list.push(cur)
							}
							this.$forceUpdate();
						}
						if(this.page<res.data.list.last_page){
							this.moreFlag = true;
						}else{
							this.moreFlag = false;
						}
					})
				} else {
					this.$u.api.indexShareList(obj).then(res => {
						if (this.page == 1) {
							// this.list = res.data.list.data.map(cur=>{
							// 	if(app.$vm.isImage(cur.ShareImage[0].image_url)){
							// 		cur.titleImage = this.getImage(cur.ShareImage[0].image_url);
							// 		cur.imgType = true;
							// 	}else{
							// 		cur.titleImage = this.getVideoUrl(cur.ShareImage[0].image_url);
							// 		cur.imgType = false;
							// 	}
							// 	return cur;
							// });
							this.list = [];
							for (let i = 0; i < res.data.list.data.length; i++) {
								let cur = res.data.list.data[i];
								if(cur.ShareImage.length>0){
									if (app.$vm.isImage(cur.ShareImage[0].image_url)) {
										cur.titleImage = this.getImage(cur.ShareImage[0].image_url);
										cur.imgType = true;
									} else {
										cur.titleImage = this.getVideoUrl(cur.ShareImage[0].image_url);
										cur.imgType = false;
									}
								}else{
									cur.imgType = true;
								}
								cur.userImg = this.getImage(cur.user.image_url);
								this.list.push(cur)
							}
							this.$forceUpdate();
						} else {
							// this.list = this.list.concat(res.data.list.data.map(cur=>{
							// 	if(app.$vm.isImage(cur.ShareImage[0].image_url)){
							// 		cur.titleImage = this.getImage(cur.ShareImage[0].image_url);
							// 		cur.imgType = true;
							// 	}else{
							// 		cur.titleImage = this.getVideoUrl(cur.ShareImage[0].image_url);
							// 		cur.imgType = false;
							// 	}
							// 	return cur;
							// }));
							for (let i = 0; i < res.data.list.data.length; i++) {
								let cur = res.data.list.data[i];
								if(cur.ShareImage.length>0){
									if (app.$vm.isImage(cur.ShareImage[0].image_url)) {
										cur.titleImage = this.getImage(cur.ShareImage[0].image_url);
										cur.imgType = true;
									} else {
										cur.titleImage = this.getVideoUrl(cur.ShareImage[0].image_url);
										cur.imgType = false;
									}
								}else{
									cur.imgType = true;
								}
								cur.userImg = this.getImage(cur.user.image_url);
								this.list.push(cur)
							}
							this.$forceUpdate();
						}
						if(this.page<res.data.list.last_page){
							this.moreFlag = true;
						}else{
							this.moreFlag = false;
						}
					})
				}
			},
			//消息
			toNews() {
				uni.switchTab({
					url: "/pages/News/News"
				})
			},
			//发布
			toRelease() {
				uni.navigateTo({
					url: "/pages/pagefour/pages/Release/Release"
				})
			},
			//详情
			toFindDetail(e) {
				let id = e.target.dataset.id || e.currentTarget.dataset.id;
				let type = e.target.dataset.type || e.currentTarget.dataset.type;
				if (type) {
					uni.navigateTo({
						url: "/pages/pagetwo/pages/FindDetail/FindDetail?id=" + id
					})
				} else {
					uni.navigateTo({
						url: "/pages/pagefive/pages/VideoDetail/VideoDetail?id=" + id
					})
				}
			},
			TabbarChange(index) {
				this.currentIndex = index;
				this.page = 1;
				this.getList();
			},
			//搜索 
			searchBtn() {
				console.log(this.keyword);
				this.page = 1;
				this.getList();
			}
		}
	}
</script>

<style scoped lang="less">
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.find {
		background-color: #F3F3F3;
		// height: calc(100vh - 100upx); 
		min-height: 100vh;
		overflow: auto;

		.top-nav {
			background-color: #F9F0E4;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 24upx;
			position: fixed;
			// top: 40upx;
			left: 0;
			right: 0;
			top: 0;
			z-index: 999;
			// background-color: #FFFFFF;
			// #ifdef MP-WEIXIN
			// height: 90upx;
			// #endif
			// #ifdef APP-PLUS
			// height: 100upx !important;
			// #endif
			box-sizing: border-box;

			// z-index: 999;
			.top_l {
				width: 44upx;
				height: 44upx;
				position: relative;

				.personal-icon1 {
					width: 32upx;
					height: 32upx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.personal-icon2 {
					position: absolute;
					bottom: 30upx;
					right: 0;
					width: 12upx;
					height: 12upx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.top_center {
				display: flex;
				align-items: center;
				width: 526upx;
				height: 56upx;
				background: #FFFFFF;
				opacity: 1;
				border-radius: 34upx;
				padding: 12upx 32upx;
				box-sizing: border-box;

				.search-icon {
					width: 32upx;
					height: 32upx;
				}

				.inputBox {
					margin-left: 18upx;
					width: calc(100% - 114upx);

					input {
						width: 100%;
						font-size: 24upx;
					}
				}
			}

			.top_r {
				display: flex;
				align-items: center;

				.location-icon {}

				.locationName {
					font-size: 24upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
					margin-left: 8upx;
				}
			}

		}

		.NavigationBox {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 16upx 24upx;
			// height: 88upx;
			box-sizing: border-box;

			.inputBox {
				// #ifdef MP-WEIXIN
				flex: 1;
				// #endif
				// #ifdef APP-PLUS
				// width: 622upx;
				// #endif
				// height: 56upx;
			}
		}

		.findBox {
			.nav-top {
				position: fixed;
				left: 0;
				right: 0;
				display: flex;
				flex-direction: row;
				// justify-content: space-between;
				align-items: center;
				width: 750upx;
				/* height: 72upx; */
				background-color: #FFFFFF;
				opacity: 1;
				z-index: 9999;
				overflow-x: auto;
				// flex-wrap: wrap;
			}

			.nav-item {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 16upx;
				white-space: nowrap;
			}

			.currentItem {
				font-size: 24upx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				line-height: 72upx;
				color: #FC8643;
			}

			.item-title {
				font-size: 24upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				line-height: 72upx;
				color: #333333;
				opacity: 1;
			}

			.tabbarBox {
				position: fixed;
				// top: 120upx;
				left: 0;
				right: 0;
				z-index: 999;
			}

			.foodBox {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				padding: 24upx;

				.foodItem {
					width: 342upx;
					background: #FFFFFF;
					opacity: 1;
					border-radius: 8upx;
					margin-bottom: 16upx;
					overflow: hidden;

					.foodImage {
						position: relative;
						width: 342upx;

						// height: 360upx;
						// border: 8upx  8upx   0 0;
						.playIcon {
							position: absolute;
							top: 20upx;
							right: 20upx;
						}

						/deep/.uni-video-container {
							background-color: #fff;
						}

						// video{
						// 	width: 100%;
						// 	height: 100%;
						// }
						// image{
						// 	width: 100%;
						// 	height: 100%;
						// }
					}

					.foodName {
						font-size: 24upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;
						padding: 16upx;
					}

					.food_B {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 16upx;

						.userInfo {
							display: flex;
							align-items: center;

							.userImage {
								width: 32upx;
								height: 32upx;
								border-radius: 50%;
								overflow: hidden;

								image {
									width: 100%;
									height: 100%;
									border-radius: 50%;
								}
							}

							.userName {
								font-size: 16upx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #333333;
								margin-left: 8upx;
							}
						}

						.giveBox {
							display: flex;
							align-items: center;

							.giveNum {
								font-size: 16upx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #333333;
								margin-left: 4upx;
							}
						}
					}
				}
			}
		}

		.addBox {
			display: flex;
			justify-content: center;
			align-items: center;
			position: fixed;
			bottom: 300upx;
			right: 24upx;
			width: 114upx;
			height: 114upx;
			border-radius: 50%;
			background: linear-gradient(90deg, #FFAC3F 0%, #FC8643 100%);
			box-shadow: 0 0 12upx rgba(255, 128, 0, 0.5);
			z-index: 999;
		}
	}
</style>
